<template>
  <div>
    <sub-level :obj="obj"></sub-level>
    <el-steps :space="200" :active="step" direction='vertical' finish-status="success">
      <el-step @click.native="on_click(1)">
        <template  slot="description">
          <div class='ll'>
            <h1>h1</h1>
            <h2>h2</h2>
            <p>p1</p>
          </div>
        </template>
      </el-step>
      <el-step @click.native="on_click(2)"></el-step>
      <el-step @click.native="on_click(3)"></el-step>
    </el-steps>
  </div>
</template>

<script>
import subLevel from './subLevel/subLevel'
import { setTimeout } from 'timers';
export default {
  name: 'FuncTable',
  data () {
  	return {
      step: 1,
      jfk: true,
      obj: {
        num: 0
      }
    }
  },
  components: {
    subLevel
  },
  mounted() {
    this.on_cl()
  },
	methods: {
  	on_click(e){
    	this.step = e
    },
    on_cl() {
      let _selt = this
      setTimeout(function() {
      _selt.obj.num++
      console.log(_selt.obj.num)
    }, 1000);
    }
  }
}
</script>

<style scoped>
.ll{
  position: relative;
  border:1px solid rgb(18, 172, 172);
  padding: 10px;
  margin-top: -10px;
  box-sizing: border-box;
}
.ll::before{
  content: '';
  position: absolute;
  left: -5px;
  top: 10px;
  width:7px;
  height: 7px;
  background-color: #EBEEF5;
  border-top: 1px solid rgb(18, 172, 172);
  border-right: 1px solid rgb(18, 172, 172);
  transform: rotate(-135deg);
}
</style>